<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/index.js"></script>
    <title>Document</title>
</head>
<body style="padding: 0;">
<el-container id="index">
    <el-header style="    margin: 0 0 1px;">
        <el-menu :default-active="activeIndex"
                 mode="horizontal"
                 @select="handleSelect">
            <el-menu-item index="1"><img src="http://localhost:8080/img/logo.png" height="60px"></el-menu-item>
            <el-submenu index="2" style="float: right">
                <template slot="title">{{ manager.name }}</template>
                <el-menu-item index="2-1">个人中心</el-menu-item>
                <el-menu-item index="2-2">修改密码</el-menu-item>
                <el-menu-item index="2-3">退出</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-header>
    <el-container>
        <el-aside width="200px">
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @select="select">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>内容管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">视频管理</el-menu-item>
                                <el-menu-item index="2-2">视频分类</el-menu-item>
                                <el-menu-item index="2-3">活动管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>组织管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1">部门管理</el-menu-item>
                                <el-menu-item index="3-2">员工管理</el-menu-item>
                                <el-menu-item index="3-3">用户管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">文件管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
        <el-main>
            <iframe v-bind:src="iframeUrl" id="myiframe"
                    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" frameborder="no"
                    border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </el-main>
    </el-container>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" top="20px">
        <el-form :model="form" >
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="再次输入" :label-width="formLabelWidth">
                <el-input v-model="form.pwds" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false" v-on:click="sub">确 定</el-button>
        </div>
    </el-dialog>
</el-container>
</body>
<script>
    new Vue({
        el: "#index",
        data() {
            return {
                iframeUrl: "pages/home.html",
                activeIndex: '1',
                manager: [],
                dialogVisible: false,
                formLabelWidth: '120px',
                form: {
                    pwd: '',
                    pwds: '',
                },
            }
        },
        created: function () {
            this.getName();
        },
        methods: {
            select(index, indexPath) {
                let iframe = document.getElementById("myiframe");
                if (index === "1") {
                    iframe.src = "pages/home.html";
                } else if (index === "2-1") {
                    iframe.src = "pages/video.html";
                } else if (index === "2-2") {
                    iframe.src = "pages/type.html";
                } else if (index === "2-3") {
                    iframe.src = "pages/activity.html";
                } else if (index === "3-1") {
                    iframe.src = "pages/department.html";
                } else if (index === "3-2") {
                    iframe.src = "pages/staff.html";
                } else if (index === "3-3") {
                    iframe.src = "pages/user.html";
                } else if (index === "4") {
                    iframe.src = "pages/file.html";
                }
            },
            getName() {
                let here = this;
                axios({
                    method: 'post',
                    url: 'dao/managerInfo',
                }).then(function (response) {
                    here.manager = JSON.parse(decodeURIComponent(response.data));
                });
            },
            handleSelect(key, keyPath) {
                let iframe = document.getElementById("myiframe");
                if(key === "2-3") {
                    window.location='http://localhost:8080/out';
                } else if (key === "2-1") {
                    iframe.src = "pages/managerInfo.html";
                } else if (key === "2-2") {
                    this.dialogVisible = true;
                }
            },
            sub() {
                let here = this;
                let data = encodeURIComponent(this.form.pwd);
                if (this.form.pwd !== '' && this.form.pwds !== '') {
                    axios({
                        method: 'post',
                        url: '/dao/update/pwdEdit',
                        data: data,
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if (data.success === "1") {
                            here.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                        } else {
                            here.$message.error("修改失败");
                        }
                    });
                } else {
                    here.$message.error("数据不完整");
                }
                this.formInit();
            },
            formInit(){
                this.form.pwd = '';
                this.form.pwds = '';
            }
        }
    })
</script>
</html>
